<template>
  <div class="list-view">
    <!-- <section class="list-box"> -->
    <div class="emptyBox" v-if="!listData || !listData.length">
      <img src="~@/assets/images/manhua/quesheng@2x.png">
      <div class="decorate">当前暂无内容~</div>
    </div>
    <div class="list-box">
      <div class="list-item" v-for="(item, index) in listData" :key="index" @click="toGoodsDetail(item, index)">
        <div class="list-img">
          <!-- <van-image
            fit="cover"
            width="90"
            height="90"
            lazy-load
            :show-error="false"
            :src="item.listPic"
          >
            <template v-slot:error>加载失败</template>
          </van-image> -->
          <img :src="item.listPic + '?imageView2/2/w/200/h/200'" @error="_loadError($event)">
          <!-- <img src="~@/assets/images/demo/temp/cate7.jpg"> -->
        </div>
        <div class="list-content-box">
          <div class="list-content">
            <div class="list-title">{{item.title}}</div>
            <div class="list-address">{{item.projectAddress}}</div>
            <div class="list-descripe-box">
              <div class="list-descripe">
                <!-- {{item.houseAdvantage.split(';').filter(item => item !== "")}} -->
                <div class="type">
                  {{item.houseAdvantage}}
                  <!-- <span v-for="(item, index) in item.houseAdvantage.split('、').filter(item => item != '')" :key="index">
                    {{item}}
                  </span> -->
                </div>
                <!-- <div class="price">{{item.unitPrice}}/m²</div> -->
              </div>
            </div>
          </div>
          <div class="price-box">
            <div class="price-item">
              <div>{{item.unitPrice}}</div>
              <small>元/m²</small>
            </div>
          </div>
        </div>

      </div>
    </div>
    <!-- </section> -->
  </div>
</template>

<script>
// import request from '@/utils/httpRequest'
import { toGoods } from '@/utils'
export default {
  name: 'list-view',
  components: {
  },
  props: {
    listData: {
      type: Array,
      default() {
        return []
      }
    },
    timeOffset: {
      type: Object,
      default() {
        return null
      }
    },
    activity_id: {
      type: String
    },
    type: {
      type: String,
      default: ''
    },
    needRefresh: {
      type: Boolean,
      default: true
    },
    needloading: {
      type: Boolean,
      default: false
    }
  },
  async created() {
    // const res = await request({
    //   url: '/home',
    //   method: 'post'
    // })
    // console.log('res', res)
  },
  data() {
    return {
      loading: false,
      refreshing: false
    }
  },
  methods: {
    refresh() {
      if (!this.needRefresh) {
        return
      }
      this.$emit('refresh')
    },
    refreshed() {
      this.refreshing = false
    },
    load() {
      if (!this.needloading) {
        return
      }
      this.$emit('load')
      this.loading = true
    },
    toGoodsDetail(item, index) {
      toGoods(item, this, index)
    },
    loaded() {
      this.loading = false
    }
  },
  computed: {
    typeString() {
      if (this.timeOffset && new Date(this.timeOffset.date * 1000) > new Date()) {
        return 'begin'
      }
      return false
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
@import "src/assets/css/mixin.scss";
@import 'src/assets/css/variables.scss';
.list-view{
  // overflow: hidden;
  position: relative;
  font-size: 16px;
  // background-color: #fff;
  .list-box{
    margin-top: 10px;
    background-color: #fff;
    .list-item{
      width: 100%;
      display: flex;
      margin-bottom: 10px;
      padding: 10px 0;
      box-shadow: 2px 2px 5px $color-border;
      // border-bottom: 1px solid $color-border;
      &:nth-last-child(1) {
        border-bottom: none;
        margin-bottom: 0px;
      }
      .list-img{
        margin: 0 10px;
        flex: 0 0 90px;
        img{
          border-radius: 10px;
          width: 90px;
          height: 90px;
          object-fit: cover;
        }
      }
      .list-content-box{
        display: flex;
        flex: 0 0 calc(100% - 110px);
        width: calc(100% - 110px);
        .price-box{
          color: #ff5152;
          font-size: 17px;
          display: flex;
          text-align: center;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          .price-item{
            width: 70px;
            border-left: 1px solid $color-border;
          }
          small{
            font-size: 15px;
            margin-top: 5px;
          }
        }
      }
      .list-content{
        display: flex;
        line-height: 20px;
        flex: 0 0 calc(100% - 70px);
        width: calc(100% - 70px);
        flex-direction: column;
        .list-title{
          color: #1a1a1a;
        }
        .list-address{
          color: #666;
          font-size: 14px;
          padding-top: 5px;
          overflow : hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }
        .list-descripe-box{
          padding-bottom: 5px;
          flex: 1;
          color: #666;
          font-size: 14px;
          flex-direction: column-reverse;
          display: flex;
          .list-descripe{
            display: flex;
            align-items: center;
            justify-content: space-between;
            .type{
              color: #41c5f7;
              overflow : hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 1;
              -webkit-box-orient: vertical;
              span{
                background-color: #41c5f7;
                color: white;
                border-radius: 5px;
                display: inline-block;
                padding: 0 5px;
                font-size: 12px;
                margin-right: 5px;
              }
            }
            .price{
              color: #ff5152;
              font-size: 17px;
            }
          }
        }
      }
    }
  }
}

</style>
